<!DOCTYPE html>
<html>
    <head>
        <title>PivotTable.js</title>
            <script>
              (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
              (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
              m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
              })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

              ga('create', 'UA-46914903-2', 'auto');
              ga('send', 'pageview');

            </script>
            <!-- START COPYING HERE -->
            <link rel="stylesheet" href="gh-fork-ribbon.css">
            <!--[if lt IE 9]>
                <link rel="stylesheet" href="gh-fork-ribbon.ie.css">
            <![endif]-->
            <!-- END COPYING HERE -->
        <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
        <link href='https://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
        <style>
            * {-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;}
            body {font-family: "Open Sans"; font-size: 18px; }
            h1, h2, h3, h4 {font-family: "Roboto Slab"; }
            li a {text-decoration: none; line-height: 1.5}
        </style>
    </head>
    <body style="margin: 10px;">
        <div class="github-fork-ribbon-wrapper right">
            <div class="github-fork-ribbon">
                <a href="https://github.com/nicolaskruchten/pivottable">Clone me on GitHub</a>
            </div>
        </div>
        <div align="center">
            <h2>PivotTable.js Examples</h2>
            <p style="width: 600px; margin: 10px auto;"><a href="https://github.com/nicolaskruchten/pivottable">PivotTable.js</a> is an open-source Javascript Pivot Table (aka Pivot Grid, Pivot Chart, Cross-Tab) implementation with drag'n'drop functionality written by <a href="http://nicolas.kruchten.com/">Nicolas Kruchten</a>.</p>

            <p style="width: 600px; margin: 10px auto;">To see what it can do and how, browse the examples below or check out the <a href="https://github.com/nicolaskruchten/pivottable/wiki">documentation wiki</a> for full details.</p>

            <p align="center">
                <a href="https://www.npmjs.com/package/pivottable"><img src="../images/npm.svg"></a>
                <a href="https://cdnjs.com/libraries/pivottable"><img src="../images/cdnjs.svg"></a>
                <a href="../tests/"><img src="../images/tests.svg"></a>
                <a href="https://github.com/nicolaskruchten/pivottable/blob/master/LICENSE.md"><img src="../images/license.svg"></a>
            </p>

            <p><strong>Are you using React? Check out the React port: <a href="https://react-pivottable.js.org/">react-pivottable</a>!</strong></p>
        </div>

        <div style="max-width: 1200px; margin: 0 auto; ">
            <a href="../images/animation.gif"><img src="../images/animation.gif" style="float: left; width: 45%; min-width: 400px; max-width: 728px; margin: 20px; clear: both; "></a>
            <div style="display: inline-block;  width: 45%; min-width: 400px; max-width: 600px; ">
                <h3 align="center">Fully Loaded Examples</h3>
                <ul>
                    <li><a href="rcsvs.html">pivotUI() with the 700+ datasets that ship with R</a></li>
                    <li><a href="local.html">pivotUI() with local CSV input: bring your own dataset</a></li>
                </ul>

                <h3 align="center">Editable JSFiddles with Tips Dataset (<a href="http://nicolas.kruchten.com/Rdatasets/doc/reshape2/tips.html">docs</a>)</h3>
                <ul>
                    <li><a href="https://jsfiddle.net/nicolaskruchten/kn381h7s/" target="_blank">pivot() demo</a></li>
                    <li><a href="https://jsfiddle.net/nicolaskruchten/w86bgq9o/" target="_blank">pivotUI() demo</a></li>
                    <li><a href="https://jsfiddle.net/nicolaskruchten/gq6w05j8/" target="_blank">pivotUI() demo with C3 charts</a></li>
                </ul>

                <h3 align="center">Basic examples</h3>
                <ul>
                    <li><a href="simple.html">pivot()</a></li>
                    <li><a href="simple_agg.html">pivot() with non-count aggregator</a></li>
                    <li><a href="simple_function.html">pivot() with function input</a></li>
                    <li><a href="scatter.html">pivot() with CSV input and chart output</a></li>
                    <li><a href="simple_ui.html">pivotUI() with "array of objects" input</a></li>
                    <li><a href="simple_ui_from_table.html">pivotUI() with table element input</a></li>
                </ul>

                <h3 align="center">Canadian Parliament 2012 Dataset <small>(<a href="mps.csv">CSV</a> or <a href="mps.json">JSON</a>)</small></h3>
                <ul>
                    <li><a href="mps.html">pivotUI() with derived attributes</a></li>
                    <li><a href="mps_prepop.html">pivotUI() prepopulated with click callback</a></li>
                    <li><a href="mps_agg.html">pivotUI() with custom aggregators and sort order</a></li>
                    <li><a href="save_restore.html">pivotUI() with configuration saving/restoring</a></li>
                    <li><a href="text_config.html">pivotUI() with serialized configuration</a></li>
                    <li><a href="onrefresh.html">pivotUI() with configuration access on refresh</a></li>
                    <li><a href="mps_csv.html">pivotUI() loaded from CSV</a></li>
                    <li><a href="mps_fr.html">pivotUI() French UI localization</a></li>
                    <li><a href="plotly.html">pivotUI() with Plotly chart renderers</a></li>
                    <li><a href="c3.html">pivotUI() with C3 chart renderers</a></li>
                    <li><a href="d3.html">pivotUI() with D3 renderers</a></li>
                    <li><a href="mps_export.html">pivotUI() with export renderers</a></li>
                    <li><a href="gchart.html">pivotUI() with Google Charts renderers</a></li>
                    <li><a href="fully_loaded.html">pivotUI() mobile-enabled and with all renderers</a></li>
                </ul>
                <h3 align="center">Montreal Weather 2014 Dataset <small>(<a href="montreal_2014.csv">CSV</a>)</small></h3>
                <ul>
                    <li><a href="montreal_2014.html">pivotUI() with date derivers, sort overriding and custom heatmap colours</a></li>
                </ul>
            </div>
        </div>
    </body>
</html>
